<template>
    <div>
        <el-page-header @back="gotoRoute('/eva-project-owner/pager')" content="主体-测评表管理">
        </el-page-header>
        <el-divider></el-divider>
        <el-button-group>
            <el-button size="mini" type="primary" @click="handEdit">新增</el-button>
        </el-button-group>
        <el-divider></el-divider>
        <el-table :data="tableData.rows" border class="w-80%">
            <el-table-column prop="project_owner_name" label="主体名称" width="260">
            </el-table-column>
            <el-table-column prop="ru_form_name" label="测评表" width="280">
            </el-table-column>
            <el-table-column prop="remark" label="备注" width="220">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
                <template slot-scope="scope">
                    <el-button @click="handEdit(scope.row)" type="success" size="small">编辑</el-button>
                    <el-button @click="handRemove(scope.row)" type="danger" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @current-change="handPage" layout="prev, pager, next" :total="tableData.count"
            :page-size="tableData.offset">
        </el-pagination>
    </div>
</template>

<script>
import { FormDialog } from '@formily/element'
import { InputForm } from '../InputForm';
import { BaseApi } from '../../../../api/common/base-api';
import { sharedConfig } from '../../../shared/BaseCurd';
import { onFieldValueChange } from '@formily/core';
import { onFieldInfo } from '../../../../api/common/field-event';
const api = new BaseApi({ prefix: "/ru-form-owner-type" });
const entity = {
    project_id: "",
    project_owner_id: "",
    project_owner_name: "",
    ru_form_id: "",
    ru_form_name: "",
    remark: "",
}
export default {
    name: "EvaProjectOwnerFormPager",
    props: ["project_id", "project_owner_id", "project_owner_name"],
    async mounted() {
        this.loadPager(1);
    },
    methods: {
        ...sharedConfig.methods,
        async loadPager({ page }) {
            const data = await api.findPager({
                page, where: {
                    project_id: this.project_id, project_owner_id: this.project_owner_id
                }
            });
            this.tableData = { ...data.data };
        },
        handEdit(row) {
            FormDialog('编辑主体-测评表', InputForm)
                .forOpen((payload, next) => {
                    const raw = (row instanceof PointerEvent) ? entity : row;
                    raw.project_id = this.project_id;
                    raw.project_owner_id = this.project_owner_id;
                    raw.project_owner_name = this.project_owner_name;
                    next({
                        initialValues: { ...raw },
                        effects() {
                            onFieldValueChange("ru_form_info", (field, form) => {
                                const names = ['ru_form_id', 'ru_form_name']
                                onFieldInfo({ names, field, form });
                            })
                        }
                    })
                })
                .forConfirm((payload, next) => {
                    next(payload)
                })
                .forCancel((payload, next) => {
                    next(payload)
                })
                .open()
                .then(async (values) => {
                    Reflect.deleteProperty(values, "ru_form_info");
                    await this._save({ api, values })
                    await this.loadPager(1);
                })
                .catch(console.error)
        },
        handRemove(row) {
            this.$confirm("确定要删除?", "系统提示").then(async () => {
                await this._remove({
                    api, where: {
                        project_id: row.project_id,
                        project_owner_id: row.project_owner_id,
                        project_owner_name: row.project_owner_name
                    }
                });
                await this.loadPager(1);
            }).catch(console.error);

        }
    },

    data() {
        return {
            tableData: {
                count: 0,
                offset: 10,
                page: 1,
                rows: [],
            }
        }
    }
}
</script>